<template>
	<view class="useCoupon">
		<view class="list">
			<block v-for="(v,i) in list" :key="i">
				<view class="coupon_item">
					<view class="item_t">
						<view class="">
							<view class="coupon_title">{{ v.name }}</view>
							<view class="use_time" v-if="v.day">领取之后{{v.day}}天后失效</view>
							<view class="use_time" v-else>{{ v.useStartTimeStr }}-{{ v.useEndTimeStr }}</view>
						</view>
						<view class="t-c">
							<view class="price">
								<text>￥</text>
								<text class="price_val">{{ v.money }}</text>
							</view>
							<view class="use_limits" v-if="parseInt(v.minPrice)">满{{ v.minPrice }}可用</view>
							<view class="use_limits" v-else>无门槛</view>
						</view>
					</view>
					<view class="item_b">
						<view class="use_desc">
							<view class="desc_title">
								<text>本券仅限商城内小程序使用</text>
								<image src="/static/mine/xia.png" mode="widthFix" class="desc_down" :class="{'open_arrow':v.isOpen}" @tap="openDesc(v,i)"></image>
							</view>
						</view>
						<view class="coupon_status">
							<button class="coupon_btn" v-if="!v.isUse" @click="receiveCoupon(v.id)">领 取</button>
							<button class="coupon_btn gray" v-else>已领取</button>
							<!-- <uni-icons type="checkbox-filled" color="#2E80FE" size="24" v-if="v.select"></uni-icons>
							<uni-icons type="circle" size="24" v-else></uni-icons> -->
						</view>
					</view>
					<view class="desc_text" v-if="v.isOpen">
						{{v.useIntroduce}}
					</view>
				</view>
			</block>
		</view>
		<!-- <view class="confirm_btn">
			<view class="" @tap="confirm" v-if="couponId">确定</view>
			<view class="" @tap="confirmItem" v-else>确定</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				// preOrderNo: '',
				search: '',
				type: 'all',
				page: 1,
				limit: 10,
				totalPage: 1,
				couponObj: null,
				
			};
		},
		onShow() {
			this.getCoupons();
		},
		methods:{
			checkCoupon(item,index){
				this.list.forEach((v,i)=>{
					if(i==index){
						this.$set(this.list[i],'select',true)
					}else{
						this.$set(this.list[i],'select',false)
					}
				})
			},
			confirm(){
				uni.$emit('couponId', this.couponId);
				uni.navigateBack();
			},
			async getCoupons() {
				const res = await this.$api.get('coupons', {
					search: this.search,
					page: this.page,
					limit: this.limit,
				});
				if(res.code == 200) {
					// console.log('优惠券：',res);
					res.data.forEach(v => {
						v.select = false;
						v.isOpen = false;
					})
					if(this.page == 1) {
						this.list = res.data;
						this.totalPage = res.data.totalPage;
					}else {
						this.list.push(...res.data);
					}
				}
			},
			openDesc(item,index) {
				this.list.forEach((v,i)=>{
					if(i==index){
						var boolean = this.list[i].isOpen
						this.$set(this.list[i],'isOpen',!boolean)
					}else{
						this.$set(this.list[i],'isOpen',false)
					}
				})
			},
			async receiveCoupon(couponId) {
				const res = await this.$api.post('coupon/receive', { couponId });
				if(res.code == 200) {
					uni.showToast({
						title: '领取成功',
						complete: () => {
							this.getCoupons();
						}
					})
				}else {
					uni.showToast({
						title: '领取失败',
						icon: 'none',
						complete: () => {
							this.getCoupons();
						}
					})
				}
			}
		},
		computed: {
			couponId() {
				const {list} = this;
				var id = '';
				if(list && list.length) {
					list.forEach(v => {
						if(v.select) {
							id = v.couponId;
							uni.setStorageSync('couponObj',v);
						}
					})
				}
				return id;
			},
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.useCoupon {
		.list {
			padding: 30rpx 26rpx 30rpx;
			box-sizing: border-box;

			.coupon_item {
				width: 100%;
				border-radius: 20rpx;
				background-color: #fff;
				padding: 36rpx 36rpx 20rpx;
				box-sizing: border-box;
				margin-bottom: 14rpx;

				.item_t {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 46rpx;

					.coupon_title {
						font-size: 30rpx;
						line-height: 30rpx;
						font-weight: bold;
						margin-bottom: 20rpx;
					}

					.use_time {
						font-size: 22rpx;
						line-height: 22rpx;
						color: #999999;
					}

					.price {
						font-size: 26rpx;
						font-weight: bold;
						color: #FF4747;
						margin-bottom: 10rpx;

						.price_val {
							font-size: 60rpx;
							line-height: 32rpx;
						}
					}

					.use_limits {
						font-size: 24rpx;
						line-height: 24rpx;
						color: #B3B3B3;
					}
				}

				.item_b {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.use_desc {
						.desc_title {
							display: flex;
							align-items: center;
							font-size: 22rpx;
							color: #999999;
							margin-bottom: 14rpx;

							.desc_down {
								width: 20rpx;
								height: 11rpx;
								margin-left: 40rpx;
							}

							.open_arrow {
								transform: rotate(180deg);
							}
						}
					}
					
					.coupon_btn {
						margin: 0;
						padding: 0;
						width: 120rpx;
						text-align: center;
						line-height: 54rpx;
						background-color: #2E80FE;
						color: #fff;
						font-size: 24rpx;
					}
					.gray {
						background-color: #dedede;
						color: #909090;
					}
				}
				
				.desc_text {
					width: 424rpx;
					font-size: 22rpx;
					color: #333;
					line-height: 26rpx;
				}
			}
		}
		.confirm_btn{
			width: 100%;
			padding: 10rpx 26rpx 30rpx;
			box-sizing: border-box;
			background-color: #fff;
			position: fixed;
			left: 0;
			bottom: 0;
			right: 0;
			z-index: 5;
			>view{
				width: 100%;
				height: 94rpx;
				border-radius: 14rpx;
				text-align: center;
				line-height: 94rpx;
				background-color: #2E80FE;
				font-size: 30rpx;
				font-weight: bold;
				color: #fff;
			}
		}
	}
</style>